$(function() {
    // 内容区域富文本
    initEditor()


    //文章封面
    // 1. 初始化图片裁剪器
    let $image = $('#image')

    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)
        // 选择文件的点击事件
    $('#chooseFileBtn').on('click', function() {
            $('#chooseFile').click()
        })
        // 更改文件事件
    $('#chooseFile').on('change', function() {
            // 这个地方拿取上传的文件可以用this也可以用e.target
            let file = this.files[0]
                // console.log(file.type);
                // 非空判断
            if (file.type.indexOf('image') < 0) return layui.layer.msg('请上传图片')
                // 需要根据选择的文件创建一个URL地址
            let URLfile = URL.createObjectURL(file)
                // console.log(URLfile);
                // 路径更换之后需要重新初始化
            $image.cropper('destroy').attr('src', URLfile).cropper(options)

        })
        // 初始化文章分类列表   并封装
    fllb()

    function fllb() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(({ data: res }) => {
            // console.log(res);
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            layer.msg(res.message)
            let arr = ['<option value="">选择文章类别</option>']
            res.data.forEach(e => {
                if (e.Id < 0) return
                arr.push(`
                <option value="${e.Id}">${e.name}</option>
                `)
            })
            $('[name=cate_id]').empty().html(arr.join(''))
            layui.form.render()

            //把数据渲染到表单
            bdxr(location.href.split('=')[1])
        })
    }


    function bdxr(id) {
        axios({
            method: 'GET',
            url: '/my/article/' + id
        }).then(({ data: res }) => {
            console.log(res.data);
            if (res.status != 0) {
                return layui.layer.msg(res.message)
            }
            layui.layer.msg(res.message)
            layui.form.val('list_form', res.data)
            setTimeout(() => {
                tinyMCE.activeEditor.setContent(res.data.content)
            }, 1000)
            let baseURL = 'http://api-breakingnews-web.itheima.net'
            let Url = baseURL + res.data.cover_img
            $image.cropper('destroy').attr('src', Url).cropper(options)
        })
    }
    // 发布
    // 声明变量记录提交方式
    let state = ''
        // 获取表单的元素
    let formHtml = $('#form_pub')[0]
        // console.log(formHtml);
    $('#form_pub').on('click', '[type=submit]', function(e) {
        e.preventDefault()
            // 让state等于点击按钮的value值
        state = e.target.value
            // console.log(state);
        $image.cropper('getCroppedCanvas', { //创建画布
            width: 400,
            height: 300
        }).toBlob(function(blob) { //将画布上的内容转化为文件对象
            // console.log(blob)
            let fd = new FormData(formHtml)
            fd.append('cover_img', blob)
            fd.append('state', state)
            console.log(...fd);
            axios({
                method: 'POST',
                url: '/my/article/edit',
                data: fd
            }).then(({ data: res }) => {
                // console.log(res);
                if (res.status != 0) {
                    return layui.layer.msg('发布失败')
                }
                if (state == '已发布') {
                    layui.layer.msg('更新成功')
                } else {
                    layui.layer.msg('已保存至草稿')
                }
                setTimeout(function() {
                    // window.parent.document.querySelector('#atr_list').click()
                    window.parent.layer.closeAll()
                        // window.parent.bgxr()
                }, 1500)
            })
        })
    })


})